<template>
  <div class="home">

    <div class="top">
      <div class="left">
        <h2>社交图谱</h2>
        <ul class="manageData">
          <li v-for="(item,index) in manageData" :key="'manageData'+index">
            <p class="title">{{item.name}}</p>
            <div class="bar">
              <i v-if="item.name == '实体'" class="iconfont icon-icon-goods"></i>
              <i v-else class="iconfont icon-lishijilu"></i>
              <div style="flex:1">
                <div class="bar_list">
                  <div class="progress">
                    <div class="inner red" :style="{width:(item.count/1000)+'%'}"></div>
                  </div>
                  <span>{{item.count}}</span>条
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="right">
        <h2>知识图谱</h2>
        <ul class="manageData">
          <li v-for="(item,index) in middleData" :key="'middleData'+index">
            <p class="title">{{item.title}}</p>
            <div class="bar">
              <i class="fa fa-book" v-if="'重点人物' == item.title"></i>
              <i class="iconfont icon-caidan" v-else></i>
              <div style="flex:1">
                <div class="bar_list">
                  <span class="title" v-if="'重点人物' == item.title">人物</span>
                  <span class="title" v-else>组织</span>
                  <div class="progress">
                    <div class="inner red" :style="{width:(item.name/100)+'%'}"></div>
                  </div>
                  <template v-if="'重点人物' == item.title">
                    <span>{{item.name}}</span>人
                  </template>
                  <template v-else>
                    <span>{{item.name}}</span>个
                  </template>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 统计图 -->
    <div class="chart-statistics" ref="statistics">
    </div>
    <!-- 监控区 -->
    <div class="monitor">
      <div class="role_left">
        <p class="title">最近监控</p>
        <ul>
          <li :class="roleIndex == index?'active':''" v-for="(item,index) in monitorRoleData" :key="'monitorRoleData'+index" @click="selectRole(item.rowkey,index)">
            <div class="icon_name">
              <img :src="item.iconUrl" alt="">
              <span @click="toward(item)" class="name">{{item.showName?item.showName:item.displayName}}</span>
              -
              <span>{{item.name}}</span>
            </div>
            <p class="time">{{item.postTime}} <i class="el-icon-delete" title="删除监控" @click="deleteMonitor(item.rowkey)"></i></p>
          </li>
          <li class="prev_next">
            <el-button-group>
              <el-button class="prev" type="primary" :disabled="curpage <= 1" @click="selectPrev('monitor')" icon="el-icon-arrow-left">上一页</el-button>
              <el-button class="next" type="primary" :disabled="curpage>=totalpage" @click="selectNext('monitor')">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </li>
        </ul>
      </div>
      <div class="message_right">
        <p class="title">消息中心</p>
        <ul v-if="monitorMessageData && monitorMessageData.length>0">
          <template v-for=" (item,index) in monitorMessageData">
            <article-info :key="index" :info="item"></article-info>
          </template>
          <li class="card_list prev_next">
            <el-button-group>
              <el-button class="prev" type="primary" :disabled="messageCurpage<=1" @click="selectPrev('monitorMessage')" icon="el-icon-arrow-left">上一页</el-button>
              <el-button class="next" type="primary" :disabled="messageCurpage>=messageTotalpage" @click="selectNext">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </li>
        </ul>
        <div v-else class="nodata">暂无数据</div>
      </div>
    </div>
    <!-- 工作区 -->
    <!-- <div class="card">
      <card name="领英" type="linkedin"></card>
      <card name="脸书" type="facebook"></card>
      <card name="推特" type="twitter"></card>
      <card name="微博" type="weibo"></card>
    </div> -->
  </div>
</template>
<script>
import echarts from 'echarts'
import card from './card.vue'
import {
  getZstp,
  getInstanceCount,
  getLinkedinData,
  getTwitterData,
  getFacebookData,
  getWeiboData,
  monitList,
  monitRoleList,
  getChartStatistics
} from '@/api/statistics'
import { deleteMonitor } from '@/api/archives'
const ArticleInfo = () => import('../workBench/article-info.vue')
export default {
  data() {
    return {
      // 中间统计数据
      middleData: {},
      // 当前选择的左侧用户
      curRoleRowkey: '',
      // 头部分类管理数据
      manageData: [],
      // 监控用户信息
      monitorRoleData: [],
      // 监控消息
      monitorMessageData: [],
      // 监控信息统计
      monitorRoleStatistics: {},
      // 监控对象当前页
      curpage: 1,
      // 监控对象一页数量
      pagesize: 10,
      roleIndex: -1,
      // 总页数
      totalpage: 0,
      // 消息中心当前页
      messageCurpage: 1,
      // 消息中心一页数量
      messagePagesize: 10,
      // 消息中心总页数
      messageTotalpage: 0
    }
  },
  created() {},
  components: {
    card,
    ArticleInfo
  },
  mounted() {
    // 获取头部信息
    this.getInstanceCount()

    // 获取最近信息
    this.getmonitMessageList()
    this.getmonitRoleList()
    // 获取图表数据
    this.getChartStatistics()
    // 获取图谱
    this.getZstp()
  },
  methods: {
    // 知识图谱
    async getZstp() {
      let result = await getZstp()
      if (result.status == 200) {
        this.middleData = [
          {
            title: '重点组织',
            name: result.data.org,
            account: result.data.orgAccount
          },
          {
            title: '重点人物',
            name: result.data.person,
            account: result.data.personAccount
          }
        ]
      }
    },
    // 获取图标统计
    getChartStatistics() {
      getChartStatistics().then(result => {
        if (result.status == 200) {
          // 横轴数据
          let xAxisData = []
          // 分类列表
          let allObject = result.data.labels
          let allList = []
          let newalllist = result.data.result.filter(item => {
            if (
              allList.find(value => {
                return value == item.tags
              })
            ) {
              return false
            } else {
              allList.push(item.tags)
              return true
            }
          })
          let statisticsMap = new Map()
          for (let [index, item] of newalllist.splice(0, 12).entries()) {
            xAxisData.push(item.tags)
            // allObject.forEach((obj)=>{
            //     let curLists = []
            //     for(let list of item.list){
            //         curLists.push(list.objecName)
            //     }
            //     if(curLists.includes(obj)){
            //         if(!statisticsMap.has(obj)){
            //             statisticsMap.set(obj,{
            //                 count:[10]
            //             })
            //         }else{
            //             statisticsMap.get(obj).count[index]=10
            //         }
            //     }else {
            //         if(!statisticsMap.has(obj)){
            //             statisticsMap.set(obj,{
            //                 count:[0]
            //             })
            //         }else{
            //             statisticsMap.get(obj).count[index]=0
            //         }
            //     }

            //     // }
            // })
            item.list.forEach(list => {
              let flag = false
              let curobj = list.objecName
              let curLists = []
              let objLists = []
              for (let obj of allObject) {
                objLists.push(obj)
              }
              if (objLists.includes(list.objecName)) {
                flag = true
              } else {
                flag = false
              }
              if (!statisticsMap.has(curobj)) {
                statisticsMap.set(curobj, {
                  count: []
                })
              }
              if (flag) {
                statisticsMap.get(curobj).count[index] = list.totalInstance
              } else {
                statisticsMap.get(curobj).count[index] = 0
              }
            })

            // Array.from(statisticsMap.values()).filter(d=>d)
            // for(let [key,value] of  Array.from(statisticsMap.values())){
            // }
          }

          // y轴数据
          let Yseries = []
          statisticsMap.forEach((value, key) => {
            Yseries.push({
              name: key,
              type: 'bar',
              data: value.count
            })
          })
          Yseries.forEach(list => {
            let curArry = []
            for (let j = 0; j <= list.data.length; j++) {
              if (typeof list.data[j] == 'undefined') {
                curArry[j] = 0
              } else {
                curArry[j] = list.data[j]
              }
            }
            list.data = curArry
          })
          // 图表初始化
          this.chart_dom = echarts.init(this.$refs.statistics)
          let option = {
            title: {
              text: '标签统计',
              left: 'center',
              top: 20
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: xAxisData,
                axisLabel: {
                  rotate: 45
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                minInterval: 1
              }
            ],
            series: Yseries
          }
          this.chart_dom.setOption(option)
        }
      })
    },
    // 获取最近信息
    getmonitMessageList() {
      let messageParams = {
        rowkey: this.curRoleRowkey,
        curpage: this.messageCurpage,
        pagesize: this.messagePagesize
      }
      monitList(messageParams).then(response => {
        if (response.status == 200) {
          this.monitorMessageData = response.data.list
          if (response.data.count % this.pagesize > 0) {
            this.messageTotalpage =
              Math.floor(response.data.count / this.pagesize) + 1
          } else {
            this.messageTotalpage = Math.floor(
              response.data.count / this.pagesize
            )
          }
        }
      })
    },
    // 获取监控对象信息
    getmonitRoleList() {
      let params = {
        curpage: this.curpage,
        pagesize: this.pagesize
      }
      monitRoleList(params).then(response => {
        if (response.status == 200) {
          this.monitorRoleStatistics = response.data
          this.monitorRoleData = response.data.list
          this.monitorRoleData.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          if (response.data.count % this.pagesize > 0) {
            this.totalpage = Math.floor(response.data.count / this.pagesize) + 1
          } else {
            this.totalpage = Math.floor(response.data.count / this.pagesize)
          }
        }
      })
    },
    // 获取对象实例的数量
    getInstanceCount() {
      getInstanceCount().then(response => {
        let instanceArr = [
          { name: '实体', count: 0 },
          { name: '事件', count: 0 }
        ]
        let data = response.data.forEach(item => {
          if (item.objectType === 'socialaccount') {
            instanceArr[0].count += item.totalInstance
          } else if (item.objectType === 'socialdynamic') {
            instanceArr[1].count += item.totalInstance
          }
        })
        // let manageMap = new Map()
        // data.forEach(item => {
        //     if (item.objecName.indexOf('领英') != -1) {
        //         if (!manageMap.has('领英')) {
        //             manageMap.set('领英', {
        //                 list: [item]
        //             })
        //         } else {
        //             manageMap.get('领英').list.push(item)
        //         }
        //     } else if (item.objecName.indexOf('脸书') != -1) {
        //         if (!manageMap.has('脸书')) {
        //             manageMap.set('脸书', {
        //                 list: [item]
        //             })
        //         } else {
        //             manageMap.get('脸书').list.push(item)
        //         }
        //     } else if (item.objecName.indexOf('推特') != -1) {
        //         if (!manageMap.has('推特')) {
        //             manageMap.set('推特', {
        //                 list: [item]
        //             })
        //         } else {
        //             manageMap.get('推特').list.push(item)
        //         }
        //     } else if (item.objecName.indexOf('微博') != -1) {
        //         if (!manageMap.has('微博')) {
        //             manageMap.set('微博', {
        //                 list: [item]
        //             })
        //         } else {
        //             manageMap.get('微博').list.push(item)
        //         }
        //     }
        // })
        // this.manageData = Array.from(manageMap.values())
        this.manageData = instanceArr
      })
    },
    // 选择不同监控对象
    selectRole(rowkey, index) {
      this.curRoleRowkey = rowkey
      this.roleIndex = index
      this.messageCurpage = 1
      this.messagePagesize = 10
      monitList({
        rowkey: this.curRoleRowkey,
        curpage: this.messageCurpage,
        pagesize: this.messagePagesize
      }).then(response => {
        if (response.status == 200) {
          this.monitorMessageData = response.data.list
          this.monitorMessageData.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          if (response.data.count % this.pagesize > 0) {
            this.messageTotalpage =
              Math.floor(response.data.count / this.pagesize) + 1
          } else {
            this.messageTotalpage = Math.floor(
              response.data.count / this.pagesize
            )
          }
        }
      })
    },
    // 跳转链接
    toward(object) {
      let currentUrl = window.location.href
      currentUrl = currentUrl.split('#')[0]
      currentUrl = `${currentUrl}#/obj-show?objectType=${
        object.objectType
      }&instanceUri=${object.rowkey}&objectUri=${
        object.objectUri
      }&displayName=${
        object.showName ? object.showName : object.displayName
      }&icon=${object.iconUrl}&name=${object.name}&belongGroup=${
        object.belongGroup
      }`
      window.open(currentUrl, '')
      // if (object.objectType == 'com.scistor.object.entity') {
      //     currentUrl = `${currentUrl}#/display?objectType=${object.objectType}&instanceUri=${object.rowkey}&objectUri=${object.objectUri}&displayName=${object.showName ? object.showName : object.displayName}&icon=${object.iconUrl}&name=${object.name}&belongGroup=${object.belongGroup}`
      //     window.open(currentUrl, '')
      // } else {
      //     currentUrl = `${currentUrl}#/obj-show?objectType=${object.objectType}&instanceUri=${object.rowkey}&objectUri=${object.objectUri}&displayName=${object.showName ? object.showName : object.displayName}&icon=${object.iconUrl}&name=${object.name}&belongGroup=${object.belongGroup}`
      //     window.open(currentUrl, '')
      // }
    },
    deleteMonitor(rowkey) {
      let params = {
        rowkey: [rowkey]
      }
      deleteMonitor(params).then(response => {
        this.getmonitRoleList()
      })
    },
    // 上一页
    selectPrev(type) {
      if (type == 'monitor') {
        if (this.curpage <= 1) {
        } else {
          this.curpage = this.curpage - 1
          this.getmonitRoleList()
        }
      } else {
        if (this.messageCurpage <= 1) {
        } else {
          this.messageCurpage = this.messageCurpage - 1
          this.getmonitMessageList()
        }
      }
    },
    // 下一页
    selectNext(type) {
      if (type == 'monitor') {
        if (this.curpage >= this.totalpage) {
        } else {
          this.curpage = this.curpage + 1
          this.getmonitRoleList()
        }
      } else {
        if (this.messageCurpage >= this.messageTotalpage) {
        } else {
          this.messageCurpage = this.messageCurpage + 1
          this.getmonitMessageList()
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
// @import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
.home {
  background: #e7edf2;
  width: 100%;
  .top {
    padding: 20px;
    display: flex;
    h2 {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      padding-bottom: 20px;
    }
    .left,
    .right {
      flex: 1;
    }
    .left {
      margin-right: 5px;
    }
    .right {
      margin-left: 5px;
    }
    .manageData {
      background: #ffffff;
      display: flex;
      align-items: center;
      li {
        flex: 1;
        padding: 10px;
        p.title {
          font-size: 16px;
          font-weight: bold;
        }
        .bar {
          display: flex;
          align-items: center;
          padding: 10px 0;
          i {
            font-size: 40px;
          }
          .bar_list {
            display: flex;
            padding: 10px 10px;

            align-items: center;
            .progress {
              margin: 0 5px;
              flex: 0 0 60%;
              background: #ccc;
              height: 5px;
              border-radius: 5px;
              .inner {
                height: 5px;
                max-width: 100%;
                background: #ccc;
                border-radius: 5px;
                &.red {
                  background: #c33838;
                }
              }
            }
          }
        }
      }
    }
  }
  .chart-statistics {
    width: 100%;
    margin: 0px 18px;
    background: #fff;
    margin-bottom: 10px;
    height: 320px;
  }
  .monitor {
    display: flex;
    align-items: stretch;
    padding: 0 20px;
    p.title {
      padding: 10px;
      font-size: 15px;
      box-shadow: 0 2px 12px 0 #e6edf3;
    }
    .role_left {
      background: #fff;
      width: 35%;
      margin-right: 10px;
      position: relative;
      ul {
        max-height: 400px;
        min-height: 400px;
        overflow: auto;
        margin-bottom: 60px;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          border-left: 2px solid#fff;
          &:hover {
            background: #e7edf2;
          }
          img {
            width: 30px;
          }
          .icon_name {
            display: flex;
            align-items: center;
            overflow: hidden;
            span {
              white-space: normal;
              flex-shrink: 0;
              padding: 0 5px;
            }
            .name {
              word-break: break-all;
              color: #14171a;
              font-size: 14px;
              font-weight: bold;
              flex-shrink: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              &:hover {
                color: #00a2f9;
                cursor: pointer;
                text-decoration: underline;
              }
            }
          }
          .time {
            white-space: normal;
            flex-shrink: 0;
            float: right;
            margin-right: 26px;
          }
          .el-icon-delete {
            cursor: pointer;
            float: right;
            margin-left: 10px;
            // position:absolute;
            // right: 5px;
          }
          .el-icon-delete:hover {
            color: #000;
          }
          &.active {
            background: #e7edf2;
            border-left: 2px solid#c33838;
          }
          &.tip {
            justify-content: space-around;
            p {
              i {
                font-size: 20px;
                padding: 0 10px;
              }
            }
          }
          &.prev_next {
            padding: 0;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #ffffff;
            box-shadow: -1px -1px 10px #ccc;
            text-align: center;
            .prev,
            .next {
              padding: 5px 20px;
              margin: 5px;
            }
          }
        }
      }
    }
    .message_right {
      flex: 1;
      background: #fff;
      margin-left: 10px;
      overflow: auto;
      position: relative;
      .nodata {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
      }
      ul {
        max-height: 460px;
        min-height: 460px;
        overflow: auto;
        padding: 10px;
        .card_list {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          padding: 10px;
          border-bottom: 1px solid#e7ecf0;
          &:hover {
            background: #f6f8fa;
          }
          &.prev_next {
            padding: 0;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #ffffff;
            box-shadow: -1px -1px 10px #ccc;
            text-align: center;
            .prev,
            .next {
              padding: 5px 20px;
              margin: 5px;
            }
          }
          img.icon {
            width: 30px;
            border-radius: 50%;
          }
          .list_content {
            padding-left: 15px;
            flex: 1;
            overflow: hidden;
            word-break: break-all;
            line-height: 20px;
            .top {
              padding: 0;
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                white-space: normal;
                flex-shrink: 0;
              }
              div.title {
                display: flex;
                align-items: flex-start;
                flex-shrink: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                p.name {
                  word-break: break-all;
                  color: #14171a;
                  font-size: 14px;
                  font-weight: bold;
                  flex-shrink: 1;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  &:hover {
                    color: #00a2f9;
                    cursor: pointer;
                    text-decoration: underline;
                  }
                }
                span {
                  white-space: nowrap;
                  padding-left: 10px;
                }
              }
            }
            .description {
              padding: 5px 0;
            }
            .quantitative-statistics {
              .operation {
                margin-right: 15px;
                .fa {
                  margin-right: 10px;
                }
              }
            }
          }
          .text_content {
            flex: 1;
            &.text-two-line {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
  .card {
    display: flex;
    padding: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
<style lang="less">
.home {
  .box-card {
    position: relative;
    width: 100%;
    .el-card__header {
      position: absolute;
      width: 100%;
      top: 0;
      background: #ffffff;
    }
    .el-card__body {
      margin-top: 40px;
      padding: 20px 0 40px 0;
      max-height: 450px;
      min-height: 450px;
      overflow-y: scroll;
    }
  }
}
</style>
